<template>
  <div>
    <!-- 好评电影 -->
    <movie-praise :praiselist="praiselist"></movie-praise>
    <div class="line"></div>
    <!-- 热映模块 -->
    <movie-hot :hotlist="hotlist"></movie-hot>
    <!-- 热映二列表到内容页模块 -->
    <ul class="hot">
      <li v-for="item in hot2list" :key="item.id">
        <router-link :to="'/movieitem/' + item.id">
          <div class="item-img">
            <img :src="item.img" />
          </div>
          <div class="item-text">
            <div class="item-l">
              <div>
                <span>{{ item.nm }}</span>
                <img
                  v-if="item.version == 'v2d imax'"
                  src="https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/v2dimax.png"
                />
              </div>
              <div>
                <span v-if="item.sc == 0">暂无评分</span
                ><span v-else
                  >观众评 <span class="score">{{ item.sc }}</span></span
                >
              </div>
              <div>主演：{{ item.star }}</div>
              <div>{{ item.rt }}</div>
            </div>
            <div class="item-r">
              <div
                class="btn"
                :style="
                  item.preSale
                    ? { background: '#3C9FE6' }
                    : { background: '#f03d37' }
                "
              >
                {{ item.preSale ? "预售" : "购票" }}
              </div>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use({ Toast });

//引入热映组件
import MovieHot from "./components/MovieHot.vue";
import MoviePraise from "./components/MoviePraise.vue";
//引入 axios
import axios from "axios";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Reying",
  //注册
  components: {
    MovieHot,
    MoviePraise,
  },
  data() {
    return {
      hotlist: [],
      hot2list: [], //第二个热映模块
      praiselist: [], //好评电影
    };
  },
  mounted() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    axios
      .get(
        "/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4",
        { ct: "深圳", ci: 30, channelId: 4 }
      )
      .then((res) => {
        console.log(res);
        this.hotlist = res.data.data.hot;

        this.praiselist = [...this.hotlist];
        //排序
        this.praiselist.sort((a, b) => {
          return b.sc - a.sc;
        });
        console.log(this.praiselist);
      });
    //热映本地数据
    axios.get("./json/movieOnInfoList.json").then((res) => {
      console.log(res);
      this.hot2list = res.data.movieList;
      this.hot2list.forEach((item) => {
        item.img = item.img.replace("w.h", "64.90");
      });
    });
  },
};
</script>

<style lang="less" scoped>
.line {
  width: 100%;
  height: 10px;
  background: #eee;
  margin-bottom: 10px;
}
.hot {
  li:last-child {
    .item-text {
      border-bottom: none;
    }
  }
  li a {
    display: flex;
    justify-content: space-around;
    padding: 5px;
    .item-img {
      width: 20%;

      img {
        width: 1.7067rem;
        height: 2.4rem;
        display: inline-block;
        // padding-left: 0.2667rem;
      }
    }
    .item-text {
      width: 75%;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      .item-l {
        font-size: 13px;
        color: #666;
        margin-bottom: 14px;
        width: 75%;
        div {
          margin-bottom: 5px;
          margin-top: 5px;
        }
        div:nth-child(1) {
          font-size: 17px;
          font-weight: bold;
          color: #333;
          display: flex;
          align-items: center;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          img {
            width: 1.1467rem;
            height: 0.3733rem;
            margin-left: 5px;
          }
        }
        div:nth-of-type(2) {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .score {
          color: #faaf00;
          font-size: 15px;
          font-weight: bold;
        }
      }
      .item-r {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
        .btn {
          width: 1.44rem;
          height: 0.7467rem;
          border-radius: 1.0667rem;
          background-color: #f03d37;
          box-shadow: 0 0.04rem 0.04rem 0 rgb(240 61 55 / 15%);
          color: #fff;
          font-size: 13px;
          text-align: center;
          line-height: 0.7467rem;
        }
      }
    }
  }
}
</style>